<template>
    <div class="echarts">
        <div class="filter">
            <el-radio-group v-model="beforekey" style="margin-bottom: 20px" size="large">
                <el-radio-button label="sale_">销量</el-radio-button>
                <el-radio-button label="_money">销售额</el-radio-button>
            </el-radio-group>
            <el-select v-model="selectActive" class="m-2" placeholder="Select" size="large">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <div id="main" style="height:400px;"></div>
    </div>
</template>

<script setup lang='ts'>
import * as echarts from 'echarts';
import { ref, watch } from 'vue';
import { getHomePage } from '@/request/homePage/index';
import type { EChartsType } from 'echarts';

// 定义图形数据类型 是按（销量'sale_' 或者 销售额'_money'）
const beforekey = ref('sale_')
/**
 * selectActive下拉选项筛选数据：
 * 昨天'yesterday'（默认项）
 * 今天'today'
 * 前三天'three_days'
 * 前七天'seven_days'
 * 前十四天'fourteen_days'
 */
const selectActive = ref('yesterday')

// 定义echart实例类型变量，为下面避免重复初始化
let myChart: EChartsType;
// 下拉选项数据
const options = [
    {
        value: 'yesterday',
        label: '昨天',
    },
    {
        value: 'today',
        label: '今天',
    },
    {
        value: 'three_days',
        label: '前三天',
    },
    {
        value: 'seven_days',
        label: '前七天',
    },
    {
        value: 'fourteen_days',
        label: '前十四天',
    },
]

/**
 * 存储请求到的图形数据
 */
let salePie = ref();
async function getEcharts() {
    // 1️⃣ 发起请求
    let EchartsData = await getHomePage();
    // 2️⃣ 将请求到的数据添加到动态数据中
    salePie.value = EchartsData.data.data.salePie;
    // 3️⃣ 调用数据过滤方法将数据传入进行首次渲染
    filterEcharts(salePie.value);
}
// 0️⃣ 调用请求图形数据方法
getEcharts();


/** 数据过滤方法
 * 
 * @param salePie 渲染图形用的数据
 */
function filterEcharts(salePie) {

    let key = beforekey.value === 'sale_' ? (beforekey.value + selectActive.value) : (selectActive.value + beforekey.value)
    // console.log(key);
    let newSalePie = salePie.map((item) => {

        return {
            value: parseFloat(item[key]),
            name: item.name
        }
    })


    let chartDom = document.getElementById('main');

    if (myChart) {
        // 销毁echarts
        myChart.dispose();
    }
    myChart = echarts.init(chartDom!);
    // console.log(myChart);

    // 响应容器大小的变化
    window.onresize = function () {
        myChart.resize();
    };
    // 图形配置数据
    let option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: "vertical",
            right: 10,
            top: 20,
            width: 300,
            height: 100,
            textStyle: {
                width: 40
            },
            tooltip: {
                show: !1
            }
        },
        calculable: true,
        series: [
            {
                name: '分类：',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['30%', '45%'],  //设置圆心
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2,
                },
                data: newSalePie,

            }
        ]
    };

    option && myChart.setOption(option);
}


/**
 * 监听选择的图形数据类型和下拉数据
 * 当这两个数据其中一个发生改变就调用过滤方法，并传入图形数据
 */
watch([beforekey, selectActive], () => {
    filterEcharts(salePie.value);
})

</script>
 
<style lang = "scss" scoped>
.echarts {
    padding: 30px 20px 0px;

    .filter {
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    #main {
        border-bottom: 2px solid #f0f0f0;
    }
}
</style>